<template>
    <div id="detail">
            <div  class="statushead" >
                <div class="back" @click="hide">
                    <i class="icon-arrow_lift"></i>
                </div>
                <span  class="name">订单详情</span>
            </div>
            <div  class="restaurant-card" >
                <div  class="head listitem">
                    <div  class="name-wrap">
                        <div><span>桌号：</span><span>{{order.numTable}}</span></div>
                    </div>
                     <div  class="name-wrap">
                        <div><span>人数：</span><span>{{order.numPeople}}</span></div>
                    </div>
                     <div  class="name-wrap">
                        <div><span >下单时间：</span><span>{{order.createTime | time}}</span></div>
                    </div>
                </div>
                <div class="user-list" v-for="user in userInfoList" :key="user.openid">
                    <div class="user-content" v-show="userInfoSize > 1">
                        <div class="user-item">
                            <img  class="img-head" :src="user.headimgurl" />
                            <label>{{user.name}}</label>
                        </div>
                        <div class="time">19:00 </div>
                    </div>
                    <div  class="product-list">
                        <ul  class="cart-item" v-for="(orderDetail,index) in orderDetailList.filter(item => item.openid == user.openid )" :key="index" >
                            <li  class="product-item">
                                <div class="profile">
                                    <p class="name">{{orderDetail.productName}}</p>
                                </div>
                                <div class="price-wrap">
                                    <span  class="quantity">x{{orderDetail.productQuantity}}</span>
                                    <span class="price">&yen;{{orderDetail.productPrice * orderDetail.productQuantity}}</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--合计-->
               <div  class="listitem">
                    <div  class="food-total">
                        <div><span>合计：</span><span>3 项</span></div>
                    </div>
                </div>
            </div>
             <div  class="detailcard-delivery card">
                <div  class="title listitem">
                    <span>优惠折扣</span>
                </div>
                <ul  class="cardlist">
                    <li  class="listitem"><span >订单号：</span>{{order.orderId}} </li>
                </ul>
            </div>
            <div  class="detailcard" >
                <!---->
                <div  class="detailcard-order card">
                    <div  class="title listitem">
                        <span>账单信息</span>
                    </div>
                    <ul  class="cardlist">
                        <li  class="listitem amount"><strong>消费金额</strong><span >&yen; {{order.orderAmount}}</span> </li>
                        <li  class="listitem amount"><strong>优惠金额</strong><span class="colorGreen">&yen; 0</span></li>
                        <li  class="listitem amount-order"><strong>应付金额</strong><span class="colorRed">&yen; {{order.orderAmount}}</span></li>
                    </ul>
                </div>
            </div>
    </div>
</template>

<script>
import { getCookie } from 'common/js/util';
let config = require('../../../config');
    config = process.env.NODE_ENV === 'development' ? config.dev : config.build;
    export default {
        data() {
           return {
               order: {},
               orderDetailList: [],
               userInfoList: [],
               cancelOrderName: '取消订单'
           };
        },
        created() {
            console.log(this.$route.params.orderId);
            // this.$axios.get('/api/buyer/order/detail?orderId=' + this.$route.params.orderId + '&openid=' + getCookie('openid')).then(function (response) {
            // this.$axios.get(url + '?id=' + this.seller.id).then((response) => {
            this.$axios.get('/buyer/order/detail', {
                params: {
                    orderId: this.$route.params.orderId,
                    openid: getCookie('openid')
                }
            }).then((response) => {
                this.order = response.data.data;
                this.orderDetailList = this.order.orderDetailList;
                this.userInfoList = this.order.userInfoList;
                console.log(this.order);
                // console.log(this.userInfoList.length);
            });
        },
        computed: {
            userInfoSize() {
                return this.userInfoList ? this.userInfoList.length : 0;
            }
        },
        filters: {
            payName: function (value) {
                if (value === 0) {
                    return '货到付款';
                } else {
                    return '微信支付';
                }
            },
            time: function (value) {
                console.log(value);
                // var date = new Date(value * 1000);
                // return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes();
                var date = new Date(value);
                return date.getHours() + ':' + date.getMinutes();
            },
            /**
             * 待接单: orderStatus = 0
             * 订单已完结: orderStatus = 1
             * 订单已取消: orderStatus = 2
             * @param value
             */
            orderStatusName: function (value) {
                if (value === 0) {
                    return '待接单';
                } else if (value === 1) {
                    return '订单已完结';
                } else if (value === 2) {
                    return '订单已取消';
                } else {
                    return '';
                }
            }
        },
        methods: {
            cancelOrder: function (orderId) {
                this.cancelOrderName = '取消中...';
                this.$http.post('/sell/buyer/order/cancel', {
                    orderId: orderId,
                    openid: getCookie('openid')
                }).then(function (response) {
                    response = response.body;
                    if (response.code === 0) {
                        location.reload();
                    } else {
                        alert('取消订单失败:' + response.msg);
                    }
                });
            },
            pay: function (orderId) {
                location.href = config.wechatPayUrl +
                    '?openid=' + getCookie('openid') +
                    '&orderId=' + orderId +
                    '&returnUrl=' + encodeURIComponent(config.sellUrl + '/#/order/' + orderId);
            },
            hide() {
                this.$router.back();
            }
        }
    };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  html, body {
    height: 100%;
  }
  #detail
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    .statuscircle
      margin-bottom: 10px;
      text-align: center; 
      img
        width: 80px;
        height: 80px;
        border-radius: 50%;
    .statushead
      position: relative;
      padding-top: 20px;
      text-align: center;
      background-color: #fff;
      padding-bottom: 20px;
      margin-bottom: 10px;
      .back
        position: absolute
        top: 10px
        left: 0
        .icon-arrow_lift
          display: block
          padding: 10px
          font-size: 20px
          color: #666
    //   .buttons button
    //     height: 1.853333rem;
    //     width: 4.8rem;
    //     white-space: nowrap;
    //     border-radius: .08rem;
    //     font-size: 0.8rem;
    //     color: #666;
    //     margin: .4rem .133333rem 0;
    //     border: 1px solid #ccc;
    //     background-color: transparent;
    .restaurant-card
      margin-bottom: 10px;
      background-color: #fff;
      .name-wrap
        img
          width: 20px;
          height: 20px;
        span
          font-size: 12px;
          color #999;
      .user-list
        .user-content
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 2px 2px;
          margin: 0 6px;
          border-bottom: 1px solid rgba(7,17,27,0.1);
          .user-item
            display: flex;
            align-items: center;
            img
              width: 30px;
              height: 30px;
              border-radius:50px;
              padding-right: 4px;
          .time
            font-size: 14px;
        .product-list .cart-item 
          padding: 13px 10px;
          border-bottom: 1px solid rgba(7,17,27,0.1);
          .product-item
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 95%;
            font-size: 14px;
          .price-wrap
            display: flex;
            width: 20%;
            margin-right:5px;
            .quantity
              color #666;
            .price
              padding-left: 50px;
              color: red;
      .food-total span
        font-weight:bold;
    .detailcard
      .title
        color: #333;
        font-weight: 700;
        span
          width: 100%;
          text-align: center;
    .detailcard-delivery
      margin-bottom: 10px;
    .listitem
      padding: 15px 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid rgba(7,17,27,0.1);
      background-color: #fff;
    .amount 
      strong
        font-size: 14px;
      .colorGreen
        color: green;
    .amount-order 
      strong
        font-size: 16px;
        font-weight: 700;
      .colorRed
        color: red;

</style>
